<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>聊天DEMO</title>
<script src="./jquery-1.6.2.min.js"></script>
<script src="./client.js"></script>
<style>
body{background-color:#ccc}
.hide{display:none}
#entry {border-width: 0;
    clear: both;
    font-size: inherit;
    margin: 0;
    outline-width: 0;
    padding: 1em;
    width: 100%;}
</style>
</head>
<body>

<div id='login'>
    用户昵称：<input type='text' id='nickInput' size='40'><br>
    <input type='button' id='connectButton' value='加入'><br>
    <input type='hidden' id='uidInput' size='40' value='<?=rand(1,99999)?>'>
</div>
<div id='load' class='hide'>
<h1>LOADING...</h1>
</div>
<div id='chat_box' class='hide'>
<div>
    <table id='msg_list'>
    </table>
</div>
<input type='text' size='200' id='entry'>
</div>
<script>
$('#connectButton').click(function(){
    $('#login').hide();
    $('#load').show();

    var uid = $("#uidInput").val();
    var nick = $("#nickInput").val();
    chat.join(uid, nick, function(session){
        if(session.error){
            alert(session.error);
            $('#login').show();
            $('#load').hide();
        }else{
            $("#load").hide();
            $('#chat_box').show();
        }
    });
});
$("#entry").keypress(function (e) {
    if (e.keyCode != 13 /* Return */) return;
    var msg = $("#entry").val();
    msg = msg.replace("\n", "");
    if (msg){
        chat.send(msg);
    }
    $("#entry").attr("value", ""); // clear the entry field.
});
</script>
</body>
</html>